<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from "vue";
import { Field } from '../../api/Operation/index'


const values: any = ref([])
const titles: any = ref([])

onMounted(async () => {
    var myChart = echarts.init(document.getElementById('main'));

    let res = await Field()

    let seriesData: any = []
    let XAxisData: any = []

    for (let i = 0; i < res.data.data.length; i++) {
        seriesData.push(res.data.data[i].value)
        XAxisData.push(res.data.data[i].title)
    }

    var option = {
        color: [
            '#63caff',
            '#49beff',
            '#03387a',
            '#03387a',
            '#03387a',
            '#6c93ee',
            '#a9abff',
            '#f7a23f',
            '#27bae7',
            '#ff6d9d',
            '#cb79ff',
            '#f95b5a',
            '#ccaf27',
            '#38b99c',
            '#93d0ff',
            '#bd74e0',
            '#fd77da',
            '#dea700',
        ],
        grid: {
            containLabel: true,
            left: 20,
            right: 20,
            bottom: 10,
            top: 40,
        },
        xAxis: {
            axisLabel: {
                color: '#c0c3cd',
                fontSize: 14,
                interval: 0,
            },
            axisTick: {
                lineStyle: {
                    color: '#384267',
                },
                show: true,
            },
            splitLine: {
                show: false,
            },
            axisLine: {
                lineStyle: {
                    color: '#384267',
                    width: 1,
                    type: 'dashed',
                },
                show: true,
            },
            data: XAxisData,
            type: 'category',
        },
        yAxis: {
            max: '100',
            axisLabel: {
                show: false
            },
            axisTick: {

                show: false,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#384267',
                    type: 'dashed',
                },
            },
            axisLine: {
                lineStyle: {
                    color: '#384267',
                    width: 1,
                    type: 'dashed',
                },
                show: true,
            },
            name: '',
        },
        series: [
            {
                data: seriesData,
                type: 'bar',
                barMaxWidth: 'auto',
                barWidth: 30,
                itemStyle: {
                    color: {
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        type: 'linear',
                        global: false,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#0b9eff',
                            },
                            {
                                offset: 1,
                                color: '#63caff',
                            },
                        ],
                    },
                },
                label: {
                    show: true,
                    position: 'top',
                    distance: 10,
                    color: '#fff',
                },
            },
            {
                data: [1, 1, 1, 1, 1],
                type: 'pictorialBar',
                barMaxWidth: '20',
                symbol: 'diamond',
                symbolOffset: [0, '50%'],
                symbolSize: [30, 15],
            },
            {
                data: seriesData,
                type: 'pictorialBar',
                barMaxWidth: '20',
                symbolPosition: 'end',
                symbol: 'diamond',
                symbolOffset: [0, '-50%'],
                symbolSize: [30, 12],
                zlevel: 2,
            },
            {
                data: [741, 741, 741, 741, 741],
                type: 'bar',
                barMaxWidth: 'auto',
                barWidth: 30,
                barGap: '-100%',
                zlevel: -1,
            }
        ],
        tooltip: {
            trigger: 'axis',
            show: false,
        },
    };



    myChart.setOption(option);
})
</script>

<template>
    <div class="left-Bottom">
        <div class="left-Bottom-img">
            <span style="padding: 10px; color: aliceblue; font-size: 1.5rem; line-height: 3rem;">场地使用</span>
        </div>
        <div class="left-Bottom-bottom">
            <div id="main" style="width: 100%;height:100%;"></div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.left-Bottom {
    width: 28rem;
    height: 20rem;
    margin: 0 6rem;
    background-color: rgb(16, 29, 91);

    &-img {
        width: 100%;
        height: 3rem;
        background: url('../../assets/images/leftImg.png') no-repeat center center;
        background-size: 100% 100%;
    }

    &-bottom {
        width: 100%;
        height: 15rem;
        margin-top: 2rem;
        background-color: rgb(29, 46, 107);

    }
}
</style>